import { defineStore } from 'pinia'
import { PRIMARY_COLOR, DARK_THEME, THEME_KEY, PRIMARY_COLOR_KEY } from '@/const/theme'
import { GLOBAL_CONFIG } from '@/const/storage'
import { isMobileDev } from '@/utils/regexp'
import { getStorage, setStorage } from '@/app/storage'
import { changePrimaryColor, changeAsideStyle, addThemeClass } from '@/app/style'
import { baseName, ICON_TYPE } from '@/const'
import { LAYOUTS } from '@/layout/types/layout'
import type { ConfigStore } from '@/store/interface/config'

type ConfigKey =
  | 'isBlur'
  | 'isWeakMode'
  | 'isGreyMode'
  | 'isDarkAside'
  | typeof PRIMARY_COLOR_KEY
  | typeof THEME_KEY
type FilterType = 'grey' | 'weak'

export const DefaultConfig = {
  [PRIMARY_COLOR_KEY]: PRIMARY_COLOR,
  theme: 'light',
  size: 'default',
  lang: 'zhCn',
  transitionName: 'slide-right',
  layout: LAYOUTS.Default,
  type: ICON_TYPE.SVG,
  asideWidth: 210,
  maxMessageCount: 3, // el-message最大显示条数
  accordionMode: true, // el-menu是否开启手风琴模式
  contentFullScreen: false, // 内容是否全屏
  collapsed: false, // 是否折叠侧边栏
  isWeakMode: false, // 弱色模式
  isGreyMode: false, // 灰色模式
  isShowFooter: false, // 是否显示页脚(目前无footer区域)
  isShowTab: true, // 是否显示tabs-view
  isShowBreadcrumb: true, // 是否显示面包屑
  isBlur: false, // element-plus相关弹出层组件是否开启背景模糊
  isDarkAside: false,
}

export default defineStore(`${baseName}__configStore`, (): ConfigStore => {
  const globalConfig = ref(getStorage(GLOBAL_CONFIG) || DefaultConfig)
  const isMobile = ref<boolean>(isMobileDev())

  const isDark = computed((): boolean => globalConfig.value.theme === DARK_THEME)

  /**
   * @description: 设置配置项
   * @param {string} key 配置项key
   * @param {any} value 配置项value
   * @param {Event} event 事件对象
   */
  function setConfig(key: string, value: any) {
    globalConfig.value[key] = value
    setStorage(GLOBAL_CONFIG, globalConfig.value)

    const handlers: Record<ConfigKey, () => void> = {
      isBlur: () => addBlurClass(value),
      isWeakMode: () => changeWeakOrGreyMode('weak', value),
      isGreyMode: () => changeWeakOrGreyMode('grey', value),
      isDarkAside: () => changeAsideStyle(value),
      [PRIMARY_COLOR_KEY]: () => changePrimaryColor(value),
      [THEME_KEY]: () => addThemeClass(value),
    }
    const handler = handlers[key as keyof typeof handlers]
    handler && handler()
  }

  function resetConfig() {
    setStorage(GLOBAL_CONFIG, DefaultConfig)
    changePrimaryColor(DefaultConfig.primaryColor)
    globalConfig.value.theme === DARK_THEME && addThemeClass(DefaultConfig.theme)
    globalConfig.value = DefaultConfig
  }

  function setIsMobile(val: boolean) {
    isMobile.value = val
  }

  function changeLayoutHorizontalStyle(value: string): void {
    if (value === LAYOUTS.Horizontal) {
      document.documentElement.style.setProperty('--el-menu-horizontal-sub-item-height', '46px')
    }
  }

  // el-overlay添加blur样式
  function addBlurClass(isBlur: boolean) {
    const elements = document.querySelectorAll('.el-overlay')
    elements.forEach((el) => {
      isBlur ? el.classList.add('blur-overlay') : el.classList.remove('blur-overlay')
    })
  }

  // 切换灰色、弱色
  function changeWeakOrGreyMode(type: string, value: boolean) {
    const body = document.body
    if (!value) return body.removeAttribute('style')

    const stylesMap: Record<FilterType, string> = {
      grey: 'filter: grayscale(1)',
      weak: 'filter: invert(80%)',
    }
    body.setAttribute('style', stylesMap[type as FilterType])
  }

  return {
    globalConfig,
    isMobile,
    isDark,
    DefaultConfig,
    setConfig,
    resetConfig,
    setIsMobile,
    addBlurClass,
    changeLayoutHorizontalStyle,
  }
})
